<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>十画生</title>
  <script src="/jquery-3.5.0.min.js"></script>
</head>
<body>
你好，十画生！

<!--
  还是之前的超链接不变，但是我们将 response_type 的值修改为 token，表示直接返回授权码，其他参数不变。
  这样，当用户登录成功之后，会自动重定向到 http://localhost:8083/index.html 页面，并且添加了一个锚点参数，类似下面这样：
  http://localhost:8083/index.html#access_token=9fda1800-3b57-4d32-ad01-05ff700d44cc&token_type=bearer&expires_in=1940
  所以接下来，我们就在 js 中提取出 # 后面的参数，并进一步解析出 access_token 的值。
  拿着 access_token 的值，我们去发送一个 Ajax 请求，将 access_token 放在请求头中，请求成功后，将请求到的数据放在 div 中
-->
<a href="http://localhost:8081/oauth/authorize?client_id=clientId_1&response_type=token&scope=all&redirect_uri=http://localhost:8083/index.html">第三方登录（简化模式）</a>

<div id="div1"></div>
<script>
  var hash = window.location.hash;//提取出参数，类似这种格式#access_token=9fda1800-3b57-4d32-ad01-05ff700d44cc&token_type=bearer&expires_in=7199
  if (hash && hash.length > 0) {
    var params = hash.substring(1).split("&");
    var token = params[0].split("=");//[access_token,9fda1800-3b57-4d32-ad01-05ff700d44cc]
    $.ajax({
      type: 'get',
      headers: {
        'Authorization': 'Bearer ' + token[1]
      },
      url: 'http://localhost:8082/admin/hello',
      success: function (data) {
        $("#div1").html(data)
      }
    })
  }
</script>
</body>
</html>
